/**
 * Created by ray on 17-6-9.
 */
/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */


import React, {Component} from 'react';
import {
    StyleSheet,
    View,
    Animated,
    FlatList,
    Text,
    Image,
    TouchableOpacity,
} from 'react-native'
import {request, apiStore, configure} from '../../service/api';

const AnimatedFlatList = Animated.createAnimatedComponent(FlatList);

export default class ListContent extends Component {



    constructor(props) {
        super(props);

        this.state = {
            results: null,
            images: [],
            isRecommended:1,
            pageNum:1,
            numPerPage:1
        }
    }

    componentDidMount() {

        let param = this.state;

        request(
            apiStore.houseInfo.houseList,
            configure.POST,
            configure.Body(`isRecommended=${param.isRecommended}&pageNum=${param.pageNum}&numPrePage=${param.numPerPage}`)
        ).then((result) => {

            let data = result.res.data.record;

            this.setState({
                results: data,
            });

        }, (result) => {
            alert(`error:${result}`);
        })
    }


    render() {

        return (
        <View>
            <Text style={styles.listTitle} onPress={this.props.onPressList}>房源精选</Text>
            <AnimatedFlatList
                data={this.state.results}
                renderItem={({item}) =>
                    <Item
                        desc={item.villageName}
                        address={item.address}
                        block={item.block}
                        city={item.city}
                        image={`${apiStore.picUrl}${item.photos.split(',')[0]}`}
                        salePrice={item.salePrice}
                        county={item.county}
                        advantage={item.advantage}
                        onPress={this.props.onPressDetial.bind(this,item.id)}

                    />
                }
            />
        </View>

        );
    }
}




const Item = ({
                  image,
                  desc,
                  city,
                  address,
                  block,
                  salePrice,
                  county,
                  advantage,
                  onPress
              }) => (
    <View>
        <View style={styles.itemTitle}>
            <Text style={styles.font1}>
                {desc}
            </Text>
            <Text style={styles.font2}>
                {block}
            </Text>
        </View>
        <TouchableOpacity onPress={onPress}>
            <Image
                style={{height: 100}}
                source={{uri: image}}
            >
                <View style={styles.priceLable}>
                    <PriceLable
                        priceDesc='最低每套'
                        price={salePrice}
                    />
                </View>

                <View style={styles.countyLable}>
                    <CountyLable
                        county={`${city}${' '}${county}`}
                        advantage={advantage}
                    />
                </View>
            </Image>
        </TouchableOpacity>

    </View>
);

const PriceLable = ({
                        priceDesc,
                        price
                    }) => (

    <View style={styles.price}>
        <Text style={styles.font3}>
            —
        </Text>
        <Text>
            { priceDesc }
        </Text>
        <Text style={styles.font3}>
            { `￥ ${price}`}
        </Text>
    </View>
);

const CountyLable = ({
                         county,
                         advantage,

                     }) => (

    <View style={styles.row}>
        <Text style={styles.font4}>
            {county}
        </Text>
        <Text style={styles.font5}>
            {advantage}
        </Text>
    </View>

);


const styles = StyleSheet.create({

    listTitle:{
      fontSize:16,
      color:'black',
      fontWeight:'bold',
      textAlign:'center',
      padding:15,
      borderWidth:1,
      borderRadius:1,
      borderColor:'rgba(0,0,0,0.3)'
    },
    itemTitle:{
        padding:15,
        alignItems:'center'
    },
    priceLable: {
        alignItems: "flex-end",
        justifyContent: 'flex-start',
        flex: 1,
        margin: 8
    },
    countyLable: {
        alignItems: 'flex-start',
        justifyContent: 'flex-end',
        flex: 1,
        margin: 8
    },

    font1: {
        fontSize: 14,
        color: '#1b1b1b',
        fontWeight: 'bold',
        padding:2
    },
    font2: {
        fontSize: 12,
        color: '#888888',
        padding:2
    },
    font3: {
        fontSize: 14,
        color: '#ff296c',
        fontWeight: 'bold',
    },
    font4: {
        backgroundColor: '#FFF',
        padding: 2,
        color: 'black',
        fontWeight: 'bold',

    },
    font5: {
        backgroundColor: 'rgba(255,255,255,0.8)',
        padding: 2,
        color: 'black',
        fontWeight: 'bold',
        marginLeft: 2
    },
    price: {
        backgroundColor: 'rgba(255,255,255,0.3)',
        width: 120,
        height: 65,
        alignItems: 'center',
        justifyContent: 'center'
    },
    row: {
        flexDirection: 'row',
    },


});
